My team was tasked with designing the UI and game flow for a hypothetical mobile game. The idea is that two teams would place sets of digital objects in a real, probably outdoor, environment. These objects are clues that form a saying or idiom that the team would have to guess after gathering every object.

I was primarily concerned with designing navigation and UI elements outside of the actual game. As a secondary role I contributed to the research and the limited game design that was within scope for the project.

The client envisioned two different user types. The Leader, who, in addition to playing the game, would be the one organizing teams and finding games. And the Members, who need to communicate with each other, join teams, and actually play the game.

But beyond that, everyone needs to have fun. 

My main research focus was other successful games that we could draw inspiration from. 

The obvious first touchpoint is Pokemon GO, the fabulously successful AR game about catching Pokemon. We drew on the overall UI a little bit as well as learning how digital objects would interact with a digital environment.

The other two, despite being very different sorts of games, provided a similar benefit to this project. Both Fortnite and Fall Guys have progression systems that allow players to unlock cosmetic items. We believed this would further player engagement as well as potentially allow us to deepen gameplay later on.

There are essentially three sections to the user flow we developed. The Leader flow leads into the Team Member flow, and both lead into the Game Flow. The short version is that the Team Leader creates a team and invites other Team Members to join it. Then the team goes and plays the game

My teammate Bobby Johnson took the lead in designing and finalizing the lion's share of these. In my opinion, he did a great job summing up how the game was supposed to go. And we constantly referred back to these flows when ensuring we had everything covered.

The entire team contributed to the low/mid fidelity wireframes we used as the basis of the final product. Lets break down a couple of my contributions.

In terms of navigation, I wanted to stay away from a nav bar as there really just aren't enough functions in the app to need that much flexibility. So I opted to put the main functions, manage team, messaging, and game creation, as larger buttons front and center. While other necessary, but less frequent, functions could be relegated to an overlay menu.

These screens are an example of the difference between a Leader and a Member. The left allows the Leader to add and remove team members as well as gives them suggestions from a connected social media. The right allows the Members to see the current status of their fellow team members as well as quickly communicate with each other.

Giving users the ability to invite teammates in a variety of ways should encourage them to do exactly that. The "Messenger" button sends a direct message through whatever social media the user connected to Haystack. If nothing has been connected, it instead was designed to open a CTA to connect something. 

This is point where things started to get fun. The initial draft of the home screen reflected exactly the design of the mid fidelity version. But in high fidelity that felt inefficient and unintuitive. 

Instead I opted to use the "Game" button as a menu that contained all the navigation elements. But the two most common (outside of finding a game), messaging and view team, are still very easily accessible. Tapping on the message feed opens up the message center, and tapping on the team display send the user right to managing their team.

The design here, however, didn't shift all that much. The same basic design is present but with a variety of visual improvements, including the addition of a CTA in the top left that opens the "Stack Menu" used in navigating outside the home screen.

The design also makes healthy use of overlays where an entirely new screen isn't necessary. On the left the "Stack Menu" allows users to naviagate around the app without need to go home first, though that is perfectly possible. And the right demonstrates the Invite overlay. A new screen wasn't needed for either function as they are only lists of options for how the user wants to accomplish a task, instead of presenting a task themselves. All messaging, whether in game or out of game, takes place in an overlay as well.

There's a lot more to this application, but I believe that it's best presented as prototype put together by myself and the rest of the team. Click around, have some fun, and see what we put together.

The intro animation as well as the matchmaking animation were both put together by the incredible Bobby Johnson. Sam Smith and Erika Vidal fill out the rest of the Haystack team.

That's Haystack in a nutshell! I'm very proud of the work we did on this project and I hope it brings just a bit of fun to your day.